<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
  <div class="ui-mode-container ui-mode-box flex-col">
    <div class="ui-header-item gradient">
      <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
        <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
      </div>
      <div class="ui-header-title">小模式列表</div>
      <div
        class="ui-header-arraw next flex-row align-center"
        @touchstart.stop
        @click="handleHome"
      >
        <i class="iconfont icon iconi-home"></i>
      </div>
    </div>
    <div class="ui-mode-content flex1" ref="scroll">
      <template v-if="pageStatus">
        <div class="mt-user-info">
          <!-- 跳转至活动模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_activity_sign_vue/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">活动签到模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至排班模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_schedule_system_vue/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">排班模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至标签模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_tag_4_goods_vue/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">标签模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至抽奖模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_luck_draw/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">抽奖模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至申请发票模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_invoice_manage/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">申请发票模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至新闻模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_news_msg/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">新闻模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至论坛模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_forum_bbs/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">论坛模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至待办事项模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_todo_list/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">待办事项模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至商品评价模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_sth/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">商品评价模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至纪念日模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_anniversary_day/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">纪念日模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至体重管理模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_weight_record/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">体重管理模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至预约模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod__reserve_things/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">预约模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至证照识别模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_ocr_things/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">证照识别模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至投票模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_vote_tool/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">投票模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至请假模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_oa_process/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">请假模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
          <!-- 跳转至记账模块 -->
          <div
            class="item flex-row align-center"
            @touchstart.stop
            @click="
              goModule(
                'https://jinglintu.downline.cn/004_mobile_web_site_lite_mod_account_book/dist/front_page_index.html'
              )
            "
          >
            <div class="label flex1">记账模块</div>
            <span class="value">查看详情</span>
            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import mixinCommon from "@/views/content/mixins/common";
import mixinRequest from "@/views/content/mixins/request";
import mixinShare from "@/views/content/mixins/share";
export default {
  name: "my/module",
  data() {
    return {
      public_agent_info: {},
      public_user_info: {},
    };
  },
  mixins: [mixinCommon, mixinRequest, mixinShare],
  components: {},
  computed: {},
  watch: {
    resourceLoaded: {
      handler(flag) {
        flag && this.$nextTick(this.init);
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    /*
     * 初始化
     */
    init() {
      this.getPageInfo({
        name: "my",
        param: {
          invoke_method: "user_and_shop_info",
        },
      }).then(({ result, response }) => {
        this.public_agent_info = result.public_agent_info || {};
        this.public_user_info = result.public_user_info || {};
        document.title = this.public_agent_info.application_name;
        this.bindText =
          result.public_user_info.id_sns &&
          result.public_user_info.id_sns.length > 15
            ? "已绑定"
            : "去绑定";
        this.setState({
          key: "public_agent_info",
          value: this.public_agent_info,
        });
        this.setState({
          key: "public_user_info",
          value: this.public_user_info,
        });
      });
    },
    /*
     * 请求失败刷新
     */
    handleRefresh() {
      this.init();
    },
    goModule(path) {
      if (path) {
        window.location.href = path;
      }
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.ui-mode-content {
  padding-bottom: 3rem;
}
.mt-avatar-item {
  position: relative;
  .box {
    width: 3rem;
    height: 3rem;
    border: solid 2px #fff;
    margin-bottom: 0.5rem;
    box-shadow: 1px 1px 3px #999;
    border-radius: 50%;
    overflow: hidden;
    background: #f9f9f9;
    position: relative;
  }
  p {
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.7rem;
  }
}
.mt-user-info {
  border-top: solid 1px #e9e9e9;
  .item {
    position: relative;
    padding: 0 0.5rem;
    line-height: 3rem;
    font-size: 0.8rem;
    border-bottom: solid 1px #e9e9e9;
    .label {
      color: #4a4a4a;
    }
    .value {
      color: #4a4a4a;
      margin-right: 0.3rem;
    }
    .icon {
      color: #888;
      font-size: 0.8rem;
    }
    &:last-child {
      border-top: none;
    }
    &:active {
      background: #eee;
    }
  }
}
.mt-master-container {
  position: fixed;
  z-index: 11;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  width: 100%;
  max-width: 20rem;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  .mt-master-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    line-height: 1.2em;
    text-align: center;
    font-size: 0.58rem;
    color: #878787;
    background: #fff;
    border-radius: 0.53rem 0.53rem 0 0;
    .mt-master-cancel {
      padding: 0.64rem 0 0.85rem 0;
      div {
        width: 2.13rem;
        height: 0.21rem;
        background: #ececec;
        border-radius: 0.1rem;
      }
    }
  }
  .cancel {
    margin: 0.85rem;
    height: 2.67rem;
    font-size: 0.85rem;
    color: #fff;
    background: #319bff;
    line-height: 2.67rem;
    border-radius: 0.21rem;
  }
  .share-title {
    font-size: 0.75rem;
    color: #222;
  }
  .share-wrap {
    padding: 1.7rem 1.7rem 0.64rem 1.7rem;
    .share-item {
      margin-right: 1.8rem;
      font-size: 0.69rem;
      color: #222;
      &:last-child {
        margin-right: 0;
      }
      img {
        margin-bottom: 0.48rem;
        display: block;
        width: 2.8rem;
        height: 2.8rem;
      }
    }
  }
  &.app_dialog-enter-active,
  &.app_dialog-leave-active {
    transition: all ease-out 0.3s;
    .mt-master-content {
      transition: all ease-out 0.3s;
    }
  }
  &.app_dialog-enter {
    opacity: 0;
    .mt-master-content {
      opacity: 0;
      transform: translateY(100%);
    }
  }
  &.app_dialog-enter-to,
  .app_dialog-leave {
    opacity: 1;
    .mt-master-content {
      opacity: 1;
      transform: translateY(0);
    }
  }
  &.app_dialog-leave-to {
    opacity: 0;
    .mt-master-content {
      opacity: 0;
      transform: translateY(100%);
    }
  }
}
</style>
